import React, { Component } from "react";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import { Redirect } from "react-router-dom";
import { actions as authActions, getLoggedUser } from "../../redux/modules/auth";
import "./style.css";

class Login extends Component{
    constructor(props) {
        super(props);
        this.state = {
            username: "jack",
            password: "123456",
            redirectToReferrer: false
        }
    }

    componentWillReceiveProps(nextProps) {
        const isLoggedIn = !this.props.user.get("userId") && nextProps.user.get("userId");
        if (isLoggedIn) {
            this.setState({
                redirectToReferrer: true
            });
        }
    }

    handleChange = e => {
        if (e.target.name === "username") {
            this.setState({
                username: e.target.value
            });
        } else if (e.target.name === "password") {
            this.setState({
                password: e.target.value
            });
        } else {
            // do nothing
        }
    };

    handleSubmit = e => {
        e.preventDefault();
        const username = this.state.username;
        const password = this.state.password;
        if (username.length === 0 || password.length === 0) {
            alert("用户名或密码不能为空！");
            return;
        }
        // 如果当前已有用户登录，先注销
        if (this.props.user.userId) {
            this.props.logout();
        }
        this.props.login(username, password);
    };
    render() {
        const { from } = this.props.location.state || { from: { pathname: "/" } };
        const { redirectToReferrer } = this.state;
        if (redirectToReferrer) {
            return <Redirect to={from} />;
        }

        return (
            <form className="login" onSubmit={this.handleSubmit}>
                <div>
                    <label>
                        用户名：
                        <input
                            name="username"
                            type="text"
                            value={this.state.username}
                            onChange={this.handleChange}
                        />
                    </label>
                </div>
                <div>
                    <label>
                        密码：
                        <input
                            name="password"
                            type="password"
                            value={this.state.password}
                            onChange={this.handleChange}
                        />
                    </label>
                </div>
                <input type="submit" value="登录" />
            </form>
        );
    }
}

// mapStateToProps是一个函数， 从名字就可以看出， 它的作用是把state转换成props。
// state就是Redux store中保存的应用状态， 它会作为参数传递给mapStateToProps， props就是被连接的展示组件的props。
const mapStateToProps = (state, props) => {
    return {
        user: getLoggedUser(state)
    };
};


// 容器组件除了可以从state中读取数据外， 还可以发送action更新state， 这就依赖于connect的第二个参数mapDispatchToProps。
// mapDispatchToProps接收store.dispatch方法作为参数， 返回展示组件用来修改state的函数
const mapDispatchToProps = dispatch => {
    return {
        ...bindActionCreators(authActions, dispatch)
    };
};

// react-redux提供了一个connect函数， 用于把React组件和Redux的store连接起来， 生成一个容器组件， 负责数据管理和业务逻辑
export default connect(mapStateToProps, mapDispatchToProps)(Login);